<template>
  <section class="match-ser">
    <div class="ser-intro">
      <h4>服务介绍</h4>
      <p>1.支付成功后，即可尊享红娘专业服务。</p>
      <p>2.享受3-5个同等级匹配对象服</p>
      <p>3.红娘负责双方联系，安排会面事宜，并就双方牵线过程中出现的问题提供专业服务。在约会结束后，及时了解约会反馈，按照您的意愿安排进一步交往或制定新的约会计划。</p>
      <p>4.若需要匹配比自己等级高的对象，需购买与对方相对应的等级服务。</p>
      <p>5.服务有效期4个月。</p>
      <p>6.服务一经开通，不予以退款，敬请谅解。</p>
    </div>
    <div class="match-goods">
      <div class="match-goods-item flex" v-for="item in matchGoods" :key="item.id" @tap='toPay(item.price)'>
        <div class="item-left">
          <div class="item-pic">
            <img :src="item.imgSrc" alt="缩略图">
          </div>
        </div>
        <div class="item-right">
          <div class="item-des flex-bt">
            <span v-text="item.name" :style="{color: item.color}">-</span>
            <button type="button" class="btn-buy mui-pull-right">购买</button>
          </div>
          <p class="item-price">￥ {{item.price}}</p>
          <p class="item-desc" v-text="item.desc">-</p>
        </div>
      </div>
    </div>

    <div class="sub-cont">
      <h4>说明</h4>
      <p>产品和会员等级相匹配，会员等级越高，价格越高。</p>
    </div>
  </section>
</template>

<script>
  export default {
    name: "match-service",
    data () {
      return {
        matchGoods: [
          {
            id: '1',
            name: '玫瑰之约',
            price: 6888,
            desc: '5次人工牵线+美荷婚恋特权',
            imgSrc: require('../../assets/images/bg/bg_mgzy.png'),
            color: '#911c28'
          },
          {
            id: '2',
            name: '翡翠之恋',
            price: 6888,
            desc: '5次人工牵线+美荷婚恋特权',
            imgSrc: require('../../assets/images/bg/bg_fczl.png'),
            color: '#73a59e'
          },
          {
            id: '3',
            name: '金玉良缘',
            price: 6888,
            desc: '5次人工牵线+美荷婚恋特权',
            imgSrc: require('../../assets/images/bg/bg_jyly.png'),
            color: '#c09e55'
          },
          {
            id: '4',
            name: '钻石之语',
            price: 6888,
            desc: '5次人工牵线+美荷婚恋特权',
            imgSrc: require('../../assets/images/bg/bg_zszy.png'),
            color: '#aa00e2'
          },
        ]
      }
    },
    methods:{
      toPay(num){
        this.$router.push({
          path: '/pay',
          query: {
            num: num
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .match-ser {
    padding: 1.5rem;
    background: linear-gradient(90deg, #deeee8 0%, #cfaeb3 100%);
  }
  .ser-intro {
    padding: 1.5rem;
    background-color: rgba(255,255,255, .6);
    border: .05rem solid #d0b0b4;
    border-radius: .5rem;
    h4 {
      margin-bottom: .5rem;
      font-size: 1.7rem;
      color: #a6353e;
      text-align: center;
    }
    p {margin-bottom: .5rem;font-size: 1.2rem;color: #666;}
  }
  .match-goods {
    margin: 1.5rem 0;
    .match-goods-item {
      margin: 1.5rem 0;
      padding: 1.5rem;
      background-color: rgba(255,255,255, .6);
      border: .05rem solid #d0b0b4;
      border-radius: .5rem;
    }
    .item-pic {
      width: 8.5rem;
      height: 8.5rem;
      overflow: hidden;
      img {width: 100%;border-radius: .5rem;}
    }
    .item-right {
      padding-left: 1rem;
      flex: 1;
    }
  }
  .item-des {
    margin-bottom: 1rem;
    font-size: 1.8rem;
  }
  .item-price {font-size: 1.5rem;color: #b25c64;}
  .item-desc {font-size: 1.2rem;color: #d5a9ad;}
  .btn-buy {
    padding: .5rem 1rem;
    font-size: 1.2rem;
    color: #fff;
    background: linear-gradient(180deg, #ff6098 0%, #fa5a5a 100%);
    border-radius: 1.3rem;
  }
  .sub-cont {
    h4 {
      font-size: 1.5rem;
      color: #c56d76;
      font-weight: bold;
    }
    p {
      margin-top: 1rem;
      font-size: 1.2rem;
      color: #c56d76;
    }
  }
</style>
